
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>104任务</title>
        <link rel="stylesheet" href="./bootstrap-3.3.7-dist/css/bootstrap.css">
        <script src="./jquery-3.2.1.js"></script>        
        <script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>

        <style type="text/css">
            .textarea{
                width: 75%; 
                min-height: 20px; 
                max-height: 300px;
                _height: 120px; 
                margin-left: 1%; /*左外边距*/
                margin-right: auto; 
                padding: 3px; /*内边距*/
                outline: 0; 
                border: 1px solid #a0b3d6; 
                font-size: 12px; /*字体大小*/
                line-height: 24px;/*行高*/
                padding: 2px;
                word-wrap: break-word;/*允许换行*/
                overflow-x: hidden;/*左右裁剪，不提供滚动框*/
                overflow-y: auto;/*上下裁剪，if溢出，提供滚动框*/
            
                border-color: rgba(82, 168, 236, 0.8);
                box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
            }
        </style>
    </head>
    
    <body>
        <div class="container">
            <div class="row">
            <!--write your code here-->
                <h2 style="text-align:center">统一建模语言理论测试</h2>
            <div class="col-xs-12 col-sm-12 ">
                    <div class="col-xs-12 col-sm-4">
                        <p>考试科目：统一建模语言</p>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        <p>时间：100分钟</p>   
                    </div>
                    <div class="col-xs-12 col-sm-4">
                        <p>得分：100</p>
                    </div>
                    <div class="col-xs-12 col-sm-4">
                            班级：<input type="text" name="class" placeholder="1班" />
                    </div>
                    <div class="col-xs-12 col-sm-4">
                            学号：<input type="text" name="studentID" placeholder="66666666" /> 
                    </div>
                    <div class="col-xs-12 col-sm-4">
                            姓名：<input type="text" name="name" placeholder="张麒麟"/>
                    </div>
            </div>
            
            <div name="填空题" class="col-xs-12 col-sm-12 ">
                <h3>一、填空题（每空5分，共20分）</h3>
                <ol>
                    <li>UML的中文全称是：<input type="text" placeholder="统一建模语言"/> </li><br/>
                    <li>对象最突出的特征是：<input type="text" placeholder="封装性"/> <input type="text" placeholder="继承性"/> <input type="text" placeholder="多态性"/> </li>
                </ol>
            </div>
            
            <div name="单选题" class="col-xs-12 col-sm-12 ">
                <h3>二、选择题（每题10分，共20分）</h3>
                <ol>
                    <li>UML与软件工程的关系是：
                        <dl>
                            <dt><input type="radio" name="only1" />（A）UML就是软件工程</dt>
                            <dt><input type="radio" name="only1" />（B）UML参与到软件工程中软件开发的几个阶段</dt>
                            <dt><input type="radio" name="only1" />（C）UML与软件工程无关</dt>
                            <dt><input type="radio" name="only1" />（D）UML是软件工程的一部分</dt>
                        </dl>
                    </li>
                    <li>Java语言支持：
                        <dl>
                            <dt><input type="radio" name="only2" >（A）单继承</dt>
                            <dt><input type="radio" name="only2" />（B）多继承</dt>
                            <dt><input type="radio" name="only2" />（C）单继承和多继承都支持</dt>
                            <dt><input type="radio" name="only2" />（D）单继承和多继承都不支持</dt>
                        </dl>
                    </li>
                </ol>
            </div>
            
            <div name="多选题" class="col-xs-12 col-sm-12 ">
                <h3>三、多选题（每空10分，共20分）</h3>
                <ol>
                    <li>用例的粒度分为以下哪三种：
                        <dl>
                            <dt><input type="checkbox" name="morechoice" />（A）概述级 </dt>
                            <dt><input type="checkbox" name="morechoice" />（B）需求级</dt>
                            <dt><input type="checkbox" name="morechoice" />（C）用户目标级</dt>
                            <dt><input type="checkbox" name="morechoice" />（D）子功能级</dt>
                        </dl>
                    </li>
                    <li>类图由以下哪三部分组成：
                        <dl>
                            <dt><input type="checkbox" name="morechoice" />（A）名称（Name）</dt>
                            <dt><input type="checkbox" name="morechoice" />（B）属性（Attribute）</dt>
                            <dt><input type="checkbox" name="morechoice" />（C）操作（Operation） </dt>
                            <dt><input type="checkbox" name="morechoice" />（D）方法（Function） </dt>
                        </dl>
                    </li>
                </ol>
            </div>
            
            <div name="判断题" class="col-xs-12 col-sm-12 ">
                <h3>四、判断题（每题10分，共20分）</h3>
                <ol>
                    <li>用例图只是用于和客户交流和沟通的，用于确定需求
                    √<input type="radio" name="choice1" />
                    ×<input type="radio" name="choice1" />
                </li>
                    <li>在状态图中，终止状态在一个状态图中允许有多个
                        √<input type="radio" name="choice2" />
                        ×<input type="radio" name="choice2" />
                    </li>
                </ol>
            </div>
            <!--可以输入enter来控制文本框的高度，用div实现textare功能以及自动换行-->
            <div name="简答题" class="col-xs-12 col-sm-12">
                <h3>五、简答题（每题20分，共20分）</h3>
                    1.简述什么是模型以及模型的表现形式？
                    <div class="textarea" contenteditable="true">模型是对现实世界的简化和抽象，模型是对所研究的系统、过程、事物或概念的一种表达形式，可以是物理实体，可以是某种图形，或者是一种数学表达式。</div>
            </div>
            
            <!-- <button type="button" class="btn btn-primary">计算分数</button> -->
        
        </div>
        <br/>
        <button type="button" class="btn btn-primary btn-lg " data-toggle="modal" data-target="#myModal">
            计算分数
        </button>
    </div>
    <!-- <form role="form">
        <div class="form-group">
          <label for="name">文本框</label>
          <textarea class="form-control" rows="3"></textarea>
        </div>
      </form> -->
    <!-- Button trigger modal -->


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">试卷分数</h4>
      </div>
      <div class="modal-body">
        100分哦！！！
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    </body>
</html>